<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>
</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container" v-loading.body="loading">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">广告管理</h1>
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="搜索广告" name="searchAd" v-if="isPermission('ad:searchList', user.permissions)">
                        <el-card class="box-card">
                            <el-form :inline="true" ref="searchAdSearch" :model="searchAdSearch" label-width="80px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="状态">
                                            <el-select v-model="searchAdSearch.status" placeholder="请选择状态">
                                                <el-option
                                                        v-for="item in stateList"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <div style="text-align: right">
                                            <el-button type="primary" @click="getSearchList">查询</el-button>
                                            <el-button type="primary" @click="clearSearch">清空查询条件</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                        <el-button type="primary" style="margin: 10px 0" v-if="isPermission('ad:searchAdd', user.permissions)" @click="dialogFormVisible = true">添加</el-button>
                        <el-card class="box-card">
                            <el-table
                                    :data="searchAdsList"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        width="70"
                                        label="序号">
                                </el-table-column>
                                <el-table-column
                                        prop="itemName"
                                        label="商品">
                                </el-table-column>
                                <el-table-column
                                        prop="insertTime"
                                        label="添加时间"
                                        align="center"
                                        :formatter="formatterTime"
                                        width="130">
                                </el-table-column>
                                <el-table-column
                                        prop="clickCount"
                                        label="点击数量">
                                </el-table-column>
                                <!--<el-table-column-->
                                        <!--prop="soldCount"-->
                                        <!--label="销售数量">-->
                                <!--</el-table-column>-->
                                <el-table-column
                                        prop="enable"
                                        label="状态"
                                        :formatter="formatterEnable">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="操作"
                                        inline-template>
                                    <div style="margin-left: -10px">
                                        <el-dropdown>
                                            <el-button size="small" type="primary">
                                                操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                            </el-button>
                                            <el-dropdown-menu slot="dropdown" align="center">
                                                <el-dropdown-item v-if="isPermission('ad:searchUp', user.permissions)"><el-button size="mini" type="primary" v-if="$index !== 0" @click.prevent.native="upMove(row)">上移</el-button></el-dropdown-item>
                                                <el-dropdown-item v-if="isPermission('ad:searchEnable', user.permissions)">
                                                    <el-button size="mini" type="primary" v-if="row.enable === 0" @click.native.prevent="enable(row)">启用</el-button>
                                                    <el-button size="mini" type="primary" v-else @click.native.prevent="enable(row)">禁用</el-button>
                                                </el-dropdown-item>
                                                <el-dropdown-item v-if="isPermission('ad:searchDelete', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="deleteRow(row.id)">删除</el-button></el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    @current-change="searchAdsCurrentChange"
                                    :current-page="searchAdsCurrentPage"
                                    :page-size="searchAdsPageSize"
                                    layout="total, prev, pager, next"
                                    :total="searchAdsTotalCount">
                            </el-pagination>
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="热门商品" name="hotAd" v-if="isPermission('ad:hotList', user.permissions)">
                        <el-card class="box-card">
                            <el-form :inline="true" ref="hotAdSearch" :model="hotAdSearch" label-width="80px">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="状态">
                                            <el-select v-model="hotAdSearch.status" placeholder="请选择状态">
                                                <el-option
                                                        v-for="item in stateList"
                                                        :label="item.label"
                                                        :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <div style="text-align: right">
                                            <el-button type="primary" @click="getSearchList">查询</el-button>
                                            <el-button type="primary" @click="clearSearch">清空查询条件</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-card>
                        <el-button type="primary" style="margin: 10px 0" v-if="isPermission('ad:hotAdd', user.permissions)" @click="dialogFormVisible = true">添加</el-button>
                        <el-card class="box-card" style="margin-top: 10px">
                            <el-table
                                    :data="hotAdsList"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        prop="itemName"
                                        label="商品">
                                </el-table-column>
                                <el-table-column
                                        prop="insertTime"
                                        label="添加时间"
                                        align="center"
                                        :formatter="formatterTime"
                                        width="130">
                                </el-table-column>
                                <el-table-column
                                        prop="clickCount"
                                        label="点击数量">
                                </el-table-column>
                                <!--<el-table-column-->
                                        <!--prop="soldCount"-->
                                        <!--label="销售数量">-->
                                <!--</el-table-column>-->
                                <el-table-column
                                        prop="enable"
                                        label="状态"
                                        :formatter="formatterEnable">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="操作"
                                        inline-template>
                                    <div style="margin-left: -10px">
                                        <el-dropdown>
                                            <el-button size="small" type="primary">
                                                操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                            </el-button>
                                            <el-dropdown-menu slot="dropdown" align="center">
                                                <el-dropdown-item v-if="isPermission('ad:hotUp', user.permissions)"><el-button size="mini" type="primary" v-if="$index !== 0" @click.prevent.native="upMove(row)">上移</el-button></el-dropdown-item>
                                                <el-dropdown-item v-if="isPermission('ad:hotEnable', user.permissions)">
                                                    <el-button size="mini" type="primary" v-if="row.enable === 0" @click.native.prevent="enable(row)">启用</el-button>
                                                    <el-button size="mini" type="primary" v-else @click.native.prevent="enable(row)">禁用</el-button>
                                                </el-dropdown-item>
                                                <el-dropdown-item v-if="isPermission('ad:hotDelete', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="deleteRow(row.id)">删除</el-button></el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    @current-change="hotAdsCurrentChange"
                                    :current-page="hotAdsCurrentPage"
                                    :page-size="hotAdsPageSize"
                                    layout="total, prev, pager, next"
                                    :total="hotAdsTotalCount">
                            </el-pagination>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

    <el-dialog :title="addTitle" v-model="dialogFormVisible">
        <el-card class="box-card">
            <el-form :model="adsItemForm" label-width="80px">
                <el-form-item label="商品">
                    <el-tag v-for="tag in Tags" style="margin-right:5px;">{{tag}}</el-tag>
                    <el-button type="primary" @click.native.prevent="showDialog">选择商品</el-button>
                </el-form-item>
                <el-form-item label="图片">
                    <el-row>
                        <img height="100" v-if="adsItemForm.imageUrl !== ''" :src="qiniuUrl + adsItemForm.imageUrl" style="height:100px">
                        <i class="el-icon-circle-close img-delete" v-if="adsItemForm.imageUrl !== ''" @click="deleteImg">
                        </i>
                        <el-upload
                                style="display: inline-block"
                                action="/file/upload"
                                :before-upload="beforeUpload"
                                :on-success="uploadPicSuccess"
                                :show-file-list="false">
                            <el-button type="primary" >上传图片</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cancelAdd">取 消</el-button>
            <el-button type="primary" @click.native.prevent="saveAdd">保 存</el-button>
        </div>
    </el-dialog>
    <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :limit-num="1" :check-list="tableData" :checked-ids="checkedIds" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<!-- 引入共通js -->
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            deleteImg () {
                this.adsItemForm.imageUrl = "";
            },
            cancelAdd () {
                this.dialogFormVisible = false;
                this.clearForm();
                this.$refs.adsItemForm.resetFields()
            },
            hotAdsCurrentChange(val) {
                this.hotAdsCurrentPage = val;
                this.getSearchList();
            },
            searchAdsCurrentChange(val){
                this.searchAdsCurrentPage = val;
                this.getSearchList();
            },
            formatterTime (row, column) {
                if (row.insertTime !== undefined && (row.insertTime + "").length >= 10) {
                    return (row.insertTime + "").substring(0, 10);
                } else {
                    return row.insertTime;
                }
            },
            handleClick(tab, event) {
                if(tab.name == "hotAd"){
                    this.selectType = 2
                    this.getSearchList();
                    this.searchAdSearch.status = '';
                    this.addTitle = '添加热门商品';
                }else if(tab.name == "searchAd"){
                    this.selectType = 1
                    this.getSearchList();
                    this.hotAdSearch.status = '';
                    this.addTitle = '添加搜索广告';
                }
            },
            clearSearch(){
                this.searchAdSearch.status = '';
                this.hotAdSearch.status = '';
                this.getSearchList();
            },
            getSearchList () {
                let that = this;
                var obj = {}
                if(this.selectType == 1){
                    obj = {
                        type:this.selectType ,
                        enable:this.searchAdSearch.status,
                        currentPage: this.searchAdsCurrentPage,
                        pageSize: this.searchAdsPageSize,
                        isAll:1
                    }
                }else if(this.selectType == 2){
                    obj = {
                        type:this.selectType ,
                        enable:this.hotAdSearch.status,
                        currentPage: this.hotAdsCurrentPage,
                        pageSize: this.hotAdsPageSize,
                        isAll:1
                    }
                }
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/searchAds/adsList", obj, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        if (that.selectType == 1) {
                            that.searchAdsList = res.data.advertisementList;
                            that.searchAdsTotalCount = res.data.total;
                        } else if (that.selectType == 2) {
                            that.hotAdsList =  res.data.advertisementList;
                            that.hotAdsTotalCount =  res.data.total;
                        }
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadPicSuccess(response,file){
                if (response.status === 100) {
                    this.adsItemForm.imageUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            showDialog () {
                this.selectItemDialog = true;
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.selectItemDialog = false;
                this.tableData =  this.$refs.selectItem.checkedData;
                this.Tags.push(this.$refs.selectItem.checkedData[0].name);
                this.itemId = this.$refs.selectItem.checkedData[0].id;
                this.itemName = this.$refs.selectItem.checkedData[0].name;
                this.adsItemForm.tagName = this.Tags[0];
            },
            cancelCallback () {
                this.selectItemDialog = false;
                this.adsItemForm.tagName = '';
            },
            clearForm () {
                this.Tags = [];
                this.checkedIds = [];
                this.tableData = [];
                this.adsItemForm.imageUrl = "";
            },
            saveAdd(){
                let that = this
                let v = false
                let obj = {
                    type:this.selectType,
                    itemId:this.itemId,
                    picUrl:this.adsItemForm.imageUrl
                }
                if(this.adsItemForm.imageUrl === ''|| this.adsItemForm.tagName === ''){
                    this.$refs.adsItemForm.validate(function (valid) {
                        if(!valid){
                            that.$message.error('星号必填');
                        }
                    })
                    //debugger
                }else{
                    this.http('/searchAds/save',obj,function (res) {
                        if(res.status == 100){
                            that.getSearchList();
                            that.clearForm();
                            that.dialogFormVisible = false;
                            that.$refs.adsItemForm.resetFields()
                            that.$alert('添加成功','提示',{
                                confirmButtonText:'确定',
                            })
                        }else{
                            this.dialogFormVisible = true;
                        }
                    },function (res) {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定'
                        })
                    })
                }
            },
            deleteRow(id){
                let that = this;
                this.http('/searchAds/delete',{id:id},function (res) {
                    if(res.status == 100){
                        that.getSearchList();
                        that.$alert('删除成功','提示',{
                            confirmButtonText:'确定'
                        })
                    }else{
                        that.$alert('删除失败','提示',{
                            confirmButtonText:'确定'
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定'
                    })
                })
            },
            formatterEnable(row){
                if(row.enable == 1){
                    return '启用';
                }else{
                    return '禁用';
                }
            },
            enable(row){
                let that = this;
                let state = '';
                if(row.enable == 1){
                    state = 0
                }else{
                    state = 1
                }
                this.http('/searchAds/update',{id:row.id,status:state},function (res) {
                    if(res.status == 100){
                       if(row.enable == 1){
                           row.enable = 0;
                       }else{
                           row.enable = 1;
                       }
                    }else{
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定'
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定'
                    })
                })
            },
            upMove(row){
                let that = this;
                this.http('/searchAds/upAds',{id:row.id,sort:row.sort,type:this.selectType},function (res) {
                    if(res.status == 200){
                        that.getSearchList();
                        that.$alert('上移成功','提示',{
                            confirmButtonText:"确定"
                        })
                    }else{
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:"确定"
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:"确定"
                    })
                })
            }
        },
        mounted:function () {
          this.getSearchList();
        },
        data: function(){
            return {
                loading: false,
                formLabelWidth: '100px',
                dialogFormVisible: false,
                qiniuUrl: list.qiniuUrl,
                stateList: [
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '禁用',
                        value: 0
                    }
                ],
                form: {},
                searchAdSearch: {
                    status: ''
                },
                hotAdSearch: {
                    status: ''
                },
                searchAdsCurrentPage: list.currentPage,
                searchAdsPageSize: list.pageSize,
                searchAdsTotalCount: 0,
                hotAdsCurrentPage: list.currentPage,
                hotAdsPageSize: list.pageSize,
                hotAdsTotalCount: 0,
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                searchAdsList: [],
                hotAdsList: [],
                activeName:'searchAd',
                selectType :1,
                Tags:[],
                adsItemForm:{
                    imageUrl:'',
                    tagName:''
                },
                adsItemRules:{
                    tagName:[
                        {required:true,message:'请选择商品'}
                    ],
                    imageUrl:[
                        {required:true,message:'请上传图片'}
                    ]
                },
                selectItemDialog: false,
                tableData: [],
                checkedIds: [],
                addTitle:'添加搜索广告'
            }
        }
    })
</script>

<style>
    .el-table__empty-block {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: auto;
    }
</style>

<!-- 20170105 --></body>
</html>